<template>
	<u-sticky>
		<view class="u-flex u-row-between u-rela">
			<view class="tabs-bg u-abso u-text-center u-p-5" :style="tabBarStyle">
				{{menuList[current].subNmae}}
			</view>
			<view class="box" v-for="(item,index) in menuList" :key='index' :class="current==index?'active':''" @click="onClick($event,index)">
				<view class="u-text-center name">
					{{item.name}}
				</view>
				<view class="u-text-center sub u-m-t-10 u-p-5">
					{{item.subNmae}}
				</view>
			</view>
		</view>
	</u-sticky>
</template>

<script>
	export default {
		props: {
			// 当前活动tab的索引
			current: {
				type: [Number, String],
				default: 0
			},
			menuList: {
				type: Array,
				default: () => {
					return []
				}
			},
			disabled:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			tabBarStyle() {
				let style = {
					transform: `translateX(${this.left}px)`,
					width: this.subW,
					height: this.subH
				};
				return style;
			},
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.sub').boundingClientRect(data => {
				this.subW = data.width + 'px'
				this.subH = data.height + 'px'
			}).exec();
		},
		data() {
			return {
				subW: 0,
				subH: 0,
				left: 0
			};
		},
		methods: {
			onClick(event, i) {
				if(this.disabled) return
				this.left = event.currentTarget.offsetLeft
				this.$emit('change', i)
			}
		},
	}
</script>

<style scoped lang="scss">
	.u-rela{
		background-color: #f5f5f5;
	}
	.box {
		width: 20%;

		.name {
			font-weight: 600;
			font-size: 30rpx;
		}

		.sub {
			font-size: 24rpx;
			color: #888;
			transition: all 0.3s;
		}
	}

	.active {
		.name {
			color: #0eb6ff;
		}
	}

	.tabs-bg {
		position: abs;
		background-color: #0eb6ff;
		border-radius: 30rpx;
		transition: all 0.3s;
		font-size: 24rpx;
		color: #fff;
		bottom: 0;
	}
</style>
